<template>
  <div>
    <px-row style="position: relative; margin-bottom: 16px" :getter="16">
      <px-col :span="24" class="water_col !h-[234px]">
        <topBoard :class-code="'WATER'" arrow />
      </px-col>
    </px-row>
    <px-row class="main_chart_dom">
      <px-col :span="24" class="water_col">
        <upwCarousel />
      </px-col>
    </px-row>
    <px-row class="main_chart_dom">
      <px-col :span="24" class="water_col">
        <wwtCarousel />
      </px-col>
    </px-row>
    <div class="full-screen">
      <fullScreen class="icon" @click="toFullScreen" />
    </div>
    <px-row class="main_chart_dom">
      <px-col :span="12" class="water_col">
        <div class="waterdom borderRidus boxShadow first_width">
          <modelTitle :title="'交班待处理事项'" />
          <p style="position: absolute; top: 20px">{{ todoListData.date }}{{ todoListData.workShift }}</p>
          <div class="model_chart">
            <px-table :data="tableData" :border="false" stripe style="width: 100%; overflow-x: hidden" height="212">
              <px-table-column show-overflow-tooltip :tooltip-effect="'light'" width="120" prop="name" label="类型" />
              <px-table-column label="事项">
                <template #default="scope">
                  <span>{{ scope.row.desc }}</span>
                </template>
              </px-table-column>
              <px-table-column width="150" label="交班人">
                <template #default="scope">
                  <span>{{ scope.row.operatorName }}</span>
                </template>
              </px-table-column>
            </px-table>
          </div>
        </div>
      </px-col>
      <px-col :span="6" class="water_col">
        <chartsUpwChemistry />
      </px-col>
      <px-col :span="6" class="water_col">
        <chartsWwtChemistry />
      </px-col>
    </px-row>
    <px-row class="main_chart_dom">
      <px-col :span="8" class="water_col">
        <chartUPWLSRWWT />
      </px-col>

      <px-col :span="8" class="water_col">
        <chartswwt />
      </px-col>
      <!-- <px-col :span="6" class="water_col">
        <div class="waterdom borderRidus boxShadow first_width">
          <modelTitle :title="'LSR水量消耗指标'" />
          <div class="model_chart">
            <chartUPWLSRWWT2 style="width: 100%" :width="'100%'" :height="'220px'" />
          </div>
        </div>
      </px-col>
      <px-col :span="6" class="water_col">
        <div class="waterdom borderRidus boxShadow first_width">
          <modelTitle :title="'WWT水量消耗指标'" />
          <div class="model_chart">
            <chartUPWLSRWWT3 style="width: 100%" :width="'100%'" :height="'220px'" />
          </div>
        </div>
      </px-col> -->
      <px-col :span="8" class="water_col">
        <chartsRecovery />
      </px-col>
    </px-row>
    <px-row class="main_chart_dom" style="height: 213px">
      <px-col :span="18" class="water_col">
        <machineOverview />
      </px-col>
      <px-col :span="6" class="water_col">
        <electricityoverview />
      </px-col>
    </px-row>
    <px-row class="main_chart_dom" style="height: 213px">
      <px-col :span="24" class="water_col">
        <gasoverview />
      </px-col>
    </px-row>
  </div>
</template>

<script setup lang="ts">
import ApprovalStatus from "@/views/common/handleover/components/ApprovalStatus.vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import topBoard from "@/views/common/topBoard/index.vue";
import chartsParent from "./components/chartsParent.vue";
import chartsAlarm from "./components/chartsAlarm.vue";
import chartsUpwChemistry from "@/views/water/water/chartsUpwChemistry.vue";
import chartsWwtChemistry from "@/views/water/water/chartsWwtChemistry.vue";
import chartswwt from "@/views/water/water/chartswwt.vue";
import chartUPWLSRWWT from "@/views/water/water/chartUPWLSRWWT.vue";
import chartUPWLSRWWT2 from "./components/chartUPWLSRWWT2.vue";
import chartUPWLSRWWT3 from "./components/chartUPWLSRWWT3.vue";
import chartsRecovery from "@/views/water/water/chartsRecovery.vue";
import upwCarousel from "@/views/water/water/upwCarousel.vue";
import wwtCarousel from "@/views/water/water/wwtCarousel.vue";
import fullScreen from "@/assets/svg/common/fullScreen.svg?component";
import { getHandoverRecord } from "@/api/modules/operation";
import machineOverview from "@/views/water/water/machineOverview.vue";
import gasoverview from "@/views/water/water/gasoverview.vue";
import electricityoverview from "@/views/water/water/electricityoverview.vue";

defineOptions({
  name: "wateroperation"
});
import { ref, reactive, toRefs, onMounted } from "vue";
import { deviceStat, dashboardqueryOtherDeptIndicator, dashboardtodoList, queryRecycleRateIndicator, handoverTask } from "@/api/waterKanban";
import { useRouter } from "vue-router";
import waterQuest from "@/views/water/water/waterQuest.vue";
const router = useRouter();
const clickHandler = type => {
  let path = "";
  if (type == "eqp") {
    path = "/all/equip/runManage/record";
  }
  if (type == "task") {
    path = "/electricity/operation/taskView";
  }
  if (type == "alarm") {
    path = "/all/alert/business";
  }
  if (type == "handover") {
    path = "/electricity/handleover/schedule";
  }
  if (type == "totalEle") {
    // showTotalEleDialog();
    isShowDetail.value = true;
  }
  if (path) {
    router.push({ path });
  }

  console.info("功能开发中，敬请期待。。。");
};

const state = reactive({
  totalDay: {
    alarmStat: { total: 0, done: 0, undone: 0 },
    callInWorkOrder: { total: 0, done: 0, undone: 0 },
    deviceStatusStat: { normal: 0, warn: 0, standby: 0, fault: 0 },
    inspectionTasks: { total: 0, done: 0, undone: 0 },
    maintenanceTasks: { total: 0, done: 0, undone: 0 },
    pmTasks: { total: 0, done: 0, undone: 0 },
    safetyHazardTasks: { total: 0, done: 0, undone: 0 },
    totalStat: { total: 0, done: 0 }
  },
  tableData: [],
  autoplay: false,
  eledata: [],
  gasdata: [],
  machinedata: []
});
const { eledata, gasdata, machinedata, totalDay, tableData, autoplay } = toRefs(state);
onMounted(() => {
  getoptions();
});
const todoListData = ref({});
const getoptions = () => {
  deviceStat({
    classCode: "WATER"
  }).then((response: any) => {
    totalDay.value = response;
  });
  dashboardtodoList().then((response: any) => {
    console.log(response);
    tableData.value = response.detail;
    todoListData.value = response;
  });
  dashboardqueryOtherDeptIndicator({}).then(res => {
    console.log(res);
    eledata.value = res.ele;
    gasdata.value = res.gas;
    machinedata.value = res.machine;
  });
};
const machinedatafiltervalue = type => {
  if (machinedata.value.length > 0) {
    const typevalue = machinedata.value.filter(item => item.name == type);
    return typevalue[0].value != null ? typevalue[0].value : "-";
  }
};
const machinedatafilterunit = type => {
  if (machinedata.value.length > 0) {
    const typevalue = machinedata.value.filter(item => item.name == type);
    return typevalue[0].unit != null ? typevalue[0].unit : "-";
  }
};
const gasdatafiltervalue = type => {
  if (gasdata.value.length > 0) {
    const typevalue = gasdata.value.filter(item => item.name == type);
    return typevalue[0].value != null ? typevalue[0].value : "-";
  }
};
const gasdatafilterunit = type => {
  if (gasdata.value.length > 0) {
    const typevalue = gasdata.value.filter(item => item.name == type);
    return typevalue[0].unit != null ? typevalue[0].unit : "-";
  }
};
const eledatafiltervalue = type => {
  if (eledata.value.length > 0) {
    const typevalue = eledata.value.filter(item => item.name == type);
    return typevalue[0].value != null ? typevalue[0].value : "-";
  }
};

setTimeout(() => {
  autoplay.value = true;
}, 15000);
const toFullScreen = () => {
  const path = "/fullScreen/water/operation/overview";
  const params = { path };
  const { href } = router.resolve(params);
  window.open(href, "_blank");
};
</script>

<style scoped lang="scss">
.full-screen {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background-color: var(--px-color-primary-light-9);
  border-radius: 4px;
  box-shadow: 0 0 4px 0 var(--px-color-primary-light-3);

  .icon {
    width: 70%;
    height: 70%;
    color: var(--px-color-primary);
  }

  &:hover {
    background-color: var(--px-color-primary-light-7);
    box-shadow: none;
  }
}

.borderRidus {
  border-radius: 4px;
}

.waterdom {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #fff;
}

.first_width {
  width: calc(100% - 16px);
}

.main_chart_dom {
  height: 286px;
  margin-top: 16px;
}

.model_chart {
  width: 100%;
  height: calc(100% - 40px);
}

.water_col {
  height: 100%;
}

.mianlist {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80%;
}

.listitem {
  flex: 1;

  .tasks-item-content {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
  }

  .content-icon {
    height: 46px;
  }

  .color-total {
    color: var(--px-color-primary);
  }

  .content-box {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .content-box-label {
      font-weight: 600;
      line-height: 1;
      color: #555;
      white-space: nowrap;
    }

    .content-box-data {
      display: flex;
      align-items: center;

      .data-text {
        font-size: 22px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
      }

      .color-done {
        color: #00b36d;
      }

      .color-total {
        color: var(--px-color-primary);
      }
    }
  }
}

.tasks-total-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;

  .tasks-total-content-title {
    font-weight: 600;
    line-height: 1;
    color: #333;
  }

  .tasks-total-content-data {
    display: flex;
    align-items: center;

    .data-text {
      font-size: 28px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    .color-done {
      color: #00b36d;
    }

    .color-total {
      color: var(--px-color-primary);
    }
  }

  .tasks-total-content-progress {
    width: 80%;
  }

  .tasks-total-content-legend {
    display: flex;
    gap: 12px;
    align-items: center;

    .legend-item {
      display: flex;
      gap: 8px;
      align-items: center;

      .legend-text {
        font-size: 12px;
        line-height: 1;
        color: #333;
        white-space: nowrap;
      }

      .legend-icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      .background-done {
        background: #00b36d;
      }

      .background-total {
        background: var(--px-color-primary);
      }
    }
  }
}

:deep(.px-progress-bar__outer) {
  height: 18px !important;
}

.heard-progress {
  width: 97%;
  height: 33px;
  margin-top: 10px;
}

:deep(.px-table) {
  .px-table__cell {
    padding: 6px 0;
  }

  td,
  tr {
    border: none;
  }

  .px-table__header-wrapper,
  .px-table__fixed-header-wrapper {
    th {
      background-color: white !important;
      border: none;
    }
  }
}

:deep(.px-table--striped .px-table__body tr.px-table__row--striped td.px-table__cell) {
  background-color: rgb(231 238 251 / 50%) !important;
}

:deep(.px-table__inner-wrapper::before) {
  background: none;
}

.torouter {
  position: absolute;
  top: 24px;
  right: 20px;
  cursor: pointer;
}

.otherdiv {
  position: relative;
  width: 100%;
  height: 117px;
  background: #eff6ff;
  border-radius: 4px;
}

.othercolor2 {
  background: #fff5e5;
}

.othercolor3 {
  background: #e6fbf8;
}

.otherdiv-title {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 128px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: #000;
}

.otherdiv-icon {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 47px;
  height: 53px;
}

.iconwidth {
  width: 48px;
  height: 43px;
}

.otherdiv-num {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-size: 24px;
  font-weight: 600;
  line-height: 33px;
  color: #3b82f6;

  span {
    font-size: 16px;
  }
}

.othernumcolor2 {
  color: #f59e0b;
}

.othernumcolor3 {
  color: #12b981;
}

:deep(.px-col-9) {
  flex: 0 0 11.1111%;
  max-width: 11.1111%;
}
</style>
